<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref,inject,onMounted } from 'vue'
const axios = inject('axios') //注入 axios
// 创建路由对象，用于编程式导航
const router = useRouter()
// 用于接收传递给组件的数据，此处传递的是选中的菜单索引
// const props = defineProps({ activeIndex: String }) //接收父组件传递过来的数据
// 设置菜单选中索引
// const asideIndex = props.asideIndex
</script>

<template>
    <el-aside>
        <el-menu :default-active="asideIndex" :router="true">
            <el-menu-item index="/staging/mystaging" >我的信息</el-menu-item>
            <el-menu-item index="/staging/mywork">作品管理</el-menu-item>
            <el-menu-item index="/staging/setPassword">修改密码</el-menu-item>
            <el-menu-item index="3">数据中心</el-menu-item>
            <el-menu-item index="4">我的授权</el-menu-item>
            <el-menu-item index="5">消息通知</el-menu-item>
        </el-menu>
    </el-aside>
</template>
<style scoped>
.el-menu {
    background-color: rgba(0, 0, 0, 0);
    /* RGBA(0, 0, 0, 0) 表示完全透明 */
    
}

.el-menu-item {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    background-color: transparent;
    /* 默认背景为透明 */
}

.el-menu-item:hover {
    background-color: rgba(137, 190, 238, 0.5);
    /* 悬停时的背景透明度 */
}
</style>